<template>
  <div class="oa-table">
    <div class="oa-table-container">
      <div class="oa-table-box">
        <el-table
          ref="tables"
          style="width: 100%"
          v-loading="tableData.loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          :empty-text="tableData.loadingText"
          :border="true"
          :data="tableData.data"
          :default-sort="tableData.defaultSort"
          :size="size"
          :highlight-current-row="highlightCurrentRow"
          :span-method="spanMethod"
          :reserve-selection="reserveSelection"
          :row-key="rowKey"
          :lazy="tableData.lazy || false"
          :tree-props="tableData.treeProps || {}"
          :height="height"
          @sort-change="
            (sort) => {
              this.sortChange && this.sortChange(sort);
            }
          "
          @select="
            (selection, row) => {
              this.select && this.select(selection, row);
            }
          "
          @select-all="
            (selection) => {
              this.selectAll && this.selectAll(selection);
            }
          "
          @selection-change="
            (selection) => {
              this.selectionChange && this.selectionChange(selection);
            }
          "
          @row-click="
            (row, column, event) => {
              this.rowClick &&
                this.rowClick(row, column, event, this.$refs['tables']);
            }
          "
          @cell-click="
            (row, column, event) => {
              this.cellClick && this.cellClick(row, column, event);
            }
          "
          @row-dblclick="
            (row, column, event) => {
              this.rowDblclick && this.rowDblclick(row, column, event);
            }
          "
        >
          <template v-for="(item, index) in columns">
            <template v-if="!item.slot">
              <Column
                v-if="item.isShow !== false"
                :key="index"
                :column="item"
                :index="index"
              />
            </template>
            <template v-else>
              <!-- 有表头插槽的 -->
              <el-table-column
                v-if="item.headerSlot"
                :key="index"
                :prop="item.prop"
                :label="item.label"
                :width="item.width"
                :align="item.align"
                :headerAlign="item.headerAlign || 'center'"
                :render-header="item.columnFormatter"
              >
                <template slot="header" slot-scope="{ column, $index }">
                  <slot
                    :name="item.headerSlot"
                    :column="column"
                    :index="$index"
                    :item="item"
                  />
                </template>
                <template slot-scope="{ row, column, $index }">
                  <slot
                    :name="item.slot"
                    :item="item"
                    :row="row"
                    :column="column"
                    :index="$index"
                  ></slot>
                </template>
              </el-table-column>
              <!--没有表头插槽的 -->
              <el-table-column
                v-else
                :key="index"
                :prop="item.prop"
                :label="item.label"
                :width="item.width"
                :align="item.align"
                :headerAlign="item.headerAlign || 'center'"
                :render-header="item.columnFormatter"
              >
                <template slot-scope="{ row, column, $index }">
                  <slot
                    :name="item.slot"
                    :item="item"
                    :row="row"
                    :column="column"
                    :index="$index"
                  ></slot>
                </template>
              </el-table-column>
            </template>
          </template>
        </el-table>
      </div>
    </div>
    <div class="pagination" v-if="tableData.total > 0">
      <el-pagination
        background
        :current-page="tableData.currentPage || 1"
        :layout="tableData.layout || 'prev, pager, next, jumper, sizes, total'"
        :total="tableData.total"
        :page-size="
          tableData.pageSize ? tableData.pageSize : [10, 20, 30, 50, 100]
        "
        @current-change="currentChange"
        @size-change="handleSizeChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import Column from "./Column";
export default {
  name: "Table",
  components: {
    Column,
  },
  props: [
    "height",
    "tableData",
    "columns",
    "currentChange",
    "handleSizeChange",
    "highlightCurrentRow",
    "reserveSelection",
    "rowKey",
    "sortChange",
    "select",
    "selectAll",
    "selectionChange",
    "rowClick",
    "cellClick",
    "rowDblclick",
    "rowIndex",
    "rowSelectClass",
    "spanMethod",
    "load",
    "size",
  ],
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style lang="scss">
@import "./style.scss";
</style>
